<template lang="">
  <div>
    <!-- <van-nav-bar
      :title="t('incomeRecord')"
      :fixed="true"
      :placeholder="true"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <div>
      <van-pull-refresh
        class="log-box"
        v-model="loading"
        :loading-text="t('underLoad')"
        :success-text="t('refreshSuccessfully')"
        :loosing-text="t('loosingText')"
        :head-height="50"
        @refresh="onRefresh"
      >
        <van-list
          v-model:loading="listLoading"
          :loading-text="t('underLoad')"
          :finished="finished"
          :finished-text="t('noMoreYet')"
          :offset="1000"
          @load="onLoad"
        >
          <table>
            <tr>
              <th>{{ t("address") }}</th>
              <th>{{ t("time") }}</th>
              <th>{{ t("amount") }}</th>
            </tr>
            <tr v-for="item in recordList" :key="item.id">
              <td>{{ plusXing(item.sendAddress) }}</td>
              <td>{{ item.updateTime }}</td>
              <td>{{ item.incomeNum }}USDT</td>
            </tr>
          </table>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
import { useI18n } from "vue-i18n";
import * as HomeApi from "@/api/home";

const { t } = useI18n();
let dom = document.querySelector("#app");

const loading = ref(false);
const recordList = reactive([]);
const listLoading = ref(false);
const finished = ref(false);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 重置滚动条
if (dom !== null) {
  dom.scrollTop = 0;
}

// 监听页码改变
watch(pageNum, (nData) => {
  if (nData) {
    console.log(nData);
  }
});

// 上拉加载事件
const onLoad = () => {
  setTimeout(() => {
    if (loading.value) {
      recordList.length = 0;
      loading.value = false;
    }

    // finished.value = true;

    listLoading.value = false;
    getRecord();
    pageNum.value++;
    if (recordList.length >= total.value) {
      finished.value = true;
    }
  }, 1000);
};

// 下拉刷新事件
const onRefresh = () => {
  setTimeout(() => {
    loading.value = false;
    pageNum.value = 1;
    // 清空列表数据
    // onLoad();
    finished.value = false;
    recordList.length = 0;
    // console.log(recordList, 'recordList');
    // getRecord();
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    // listLoading.value = true;
    // onLoad();
    // getRecord();
    // loading.value = false;
  }, 1000);
};

// 获取收益记录
const getRecord = async () => {
  const res = await HomeApi.getRecord({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  });
  recordList.push(...res.data.content.rows);
  total.value = res.data.content.total;
};

// // 点击左侧导航栏返回上一页
// const onClickLeft = () => {
//   history.back();
// };

// 格式化钱包地址
const plusXing = (str) => {
  let xing = "";
  for (let i = 0; i < 4; i++) {
    xing += "*";
  }
  return str.substring(0, 5) + xing + str.substring(str.length - 3);
};
</script>
<style scoped lang="scss">
.log-box {
  // height: 100vh;
  height: 100%;
  min-height: 100vh;
  color: #fff;
  background-color: #000;
  // padding-bottom: 50px;

  table {
    text-align: center;
    width: 100%;

    th {
      font-size: 16px;
      font-family: PingFangSC-Regular;
      font-weight: Regular;
      color: #f0bc0f;
      padding: 16px 0 13px 0;
    }

    td {
      font-size: 14px;
      font-family: ChakraPetch-Regular;
      font-weight: Regular;
      padding: 12px 0;
    }
  }
}
</style>
